<template>
	<view class="container" :class="'theme-'+theme">
		<view class="addTitle">
			<view class="titleDetail">
				 <view class="" style="flex:1;text-align:left"> 
					<image src="../../static/newh5/fanhui.png" 
					class="yticon" 
					style="width: 13px;height: 20px;color:black" 
					@click="returnIndex()"
					></image>
				</view>
				<view class="titleText" style="flex:1">
					<b>足迹</b>
				</view>
				<view class="" @click="handleClick()" style="color:#269cd3;flex:1;text-align:right">
					<text>{{isEdit?'完成':'编辑'}}</text>
				</view>
			</view>
		</view>
		<!-- <view class="footer">
			<text>111</text>
		</view> -->
		<view class="f-list" v-for="(item,index) in footPathList" :key="index" >
			<!-- goToDetail -->
			<view class="f-time" v-for="(titem,key,inde) in item" :key="inde">
				<!-- <b>{{item.createTime.split(' ')[0]}}</b> -->
				<b>{{key}}</b>
			<view class="f-item" v-for="(goodsitem,goodindex) in titem"  :key="goodindex">
				<radio :value="goodsitem.name" 
				:checked="goodsitem.show" 
				color= '#00B48D' 
				v-show="isEdit" @click.stop="goodsCheck(goodsitem)" />
				
					<image class="left" :src="goodsitem.thumbnail" @click="goToDetail(goodsitem)"></image>
					<view class="right"  @click="goToDetail(goodsitem)">
						<text class="title more-t">{{goodsitem.name}}</text>
						<view class="money-box">
							<text  class="price">{{'￥'+goodsitem.price}}</text>
						</view>
						<view class="action">
							<!-- <text class="delete" @click.stop="removeOne(item,index)">取消收藏</text> -->
							<image @click.stop="addCart(goodsitem)" src="../../static/add-cart.png"></image>
						</view>
					</view>
				
				
			</view>
			</view>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
		<!-- 底部菜单栏 -->
		<view class="footerBox" v-show="isEdit">
			<view class="footerContent">
				<view style="display:none">{{isAll}}</view>
				<view @click="allCheck">
					<radio :checked='allSelected' />全选
				</view>
				<view class="delete" @click="deleteFooter()">
					<text>删除</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import {
		getFootpathList,
		addListToCart,
		removeList,
		addOneToCart,
		deleteFooterPath
	} from '../../api/footpath/footpath.js'
	import {
		removeCollection
	} from '../../api/product/list.js'
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				page: 1,
				removeIds:[],
				footPathList: [],
				loadingType: 'more',
				//编辑or完成
				opType: '编辑',
				isEdit:false,
				ids:[],
				allSelected:false,
				times:[],
			};
		},
		onReachBottom() {
			this.loadData()
		},
		onLoad() {
			this.loadData('fresh')
			
		},
		computed: {
			isAll :function(){
				let isallValue = true
				this.footPathList.forEach(item=>{
						let firstContent = this.getFirst(item)
						firstContent.forEach(fitem=>{
							// console.log('fitem.show',fitem.show);
							this.removeContent(fitem)
							if(fitem.show==false)isallValue = false;
						})
					})
				this.allSelected = isallValue
			}
		},
		methods: {
			timeclear(data){
				data.forEach(item=>{
					this.times.push(item.createTime.split(' ')[0])

				})
			this.times = [...new Set(this.times)]
			console.log('时间',this.times);
			},
			//足迹全选
			allCheck(){
				this.allSelected = !this.allSelected
				if(this.allSelected){
					this.footPathList.forEach(item=>{
						let firstContent = this.getFirst(item)
						firstContent.forEach(fitem=>{
							this.$set(fitem,'show',true)
							this.removeIds.push(fitem.id)
						})
						// item.show = true
					})
				}else{
					this.footPathList.forEach(item=>{
						let firstContent = this.getFirst(item)
						firstContent.forEach(fitem=>{
							this.$set(fitem,'show',false)
						})
						// item.show = true
					})
					this.removeIds = []
				}
				console.log('removeIds',this.removeIds);
			},
			//删除足迹
			deleteFooter(){
				this.careSelected()
				if(this.ids.length==0){
					this.$util.msg('请选择足迹记录进行删除')
					return;
				}
				const params = {
					idList:this.ids,
					isALLChecked :this.allSelected
				}
				console.log('删除数组',this.ids);
				console.log('是否全选',this.allSelected);
				deleteFooterPath(params).then(res=>{
					if(res.code == 0 ){
						console.log('res',res.data);
						this.deleteList(params.idList)
						setTimeout(()=>{
							if(this.allSelected)this.loadData('fresh');
							this.allSelected = false
						},100)
					}
				})
			},
			getFirst(obj){		
				//obj为我们的对象
                var n=0;
                for(var key in obj){
                     return obj[key];
             	   }
            },
			deleteList(val){
				console.log('val',val);
				console.log('this.footPathList',this.footPathList);
				val.forEach(item=>{
					this.footPathList.forEach( (element,index)=>{
						console.log('element',element);
						let firstContent = this.getFirst(element)
						firstContent.forEach( (fitem,findex)=>{
							if(item == fitem.id){
								firstContent.splice(findex,1)
							}
						})
						
					})
				})
			},
			careSelected(){
				this.ids=[]
				this.ids = [...new Set(this.removeIds)]
				// this.footPathList.forEach(item=>{
				// 	if(item.show){
				// 		this.ids.push(item.id)
				// 	}
				// })
				console.log('选中的足迹',this.ids);
			},
			goodsCheck(val){
				if(val.show == undefined){
					this.$set(val,'show',true)
					console.log('addshow');
				}else{
					console.log('val-for',val);
					val.show = !val.show
					console.log('val-after',val);
					if(!val.show)this.allSelected = false;
				}
				this.removeContent(val)
				// this.careSelected()
			},
			//同步足迹的ids
			removeContent(val){
				if(val.show == true){
					this.removeIds.push(val.id)
				}else{
					let index = this.removeIds.indexOf(val.id)
					this.removeIds.splice(index,1)
					
				}
			},
			handleClick() {
				this.isEdit = !this.isEdit 

			},
			returnIndex() {
				// uni.navigateBack();
				this.backRouter()
			},
		backRouter() {   
                // #ifdef H5  
        let canBack = true  
        const pages = getCurrentPages()  
                // 有可返回的页面则直接返回，uni.navigateBack默认返回失败之后会自动刷新页面 ，无法继续返回  
        if (pages.length > 1) {  
                    uni.navigateBack(1)  
                    return;  
        }  
                // vue router 可以返回uni.navigateBack失败的页面 但是会重新加载  
        let a = this.$router.go(-1)  
                // router.go失败之后则重定向到首页  
        if (a == undefined) {  
                    uni.reLaunch({  
                        url: "/pages/index/index"  
                    })  
        }  
        return;  
                // #endif  
                uni.navigateBack(1)  
      },
			loadData(type) {
				if (this.loadingType === 'loading') {
					return;
				}
				this.loadingType = 'loading'
				const params = {
					current: this.page,
					size: 10,
					// areaId: uni.getStorageSync('areaId')
				}
				getFootpathList(params).then(res => {
					if (res.code === 0) {
						let data = JSON.parse(JSON.stringify(res.data.records))
						console.log('data[0]',data[0]);

						// data.forEach(item => {
						// 	this.$set(item,'show',false)
						// });
						console.log('data',data);
						if(type == 'fresh'){
							this.footPathList = data
						}else{
							this.footPathList = this.footPathList.concat(data)
						}
						// this.footPathList = this.footPathList.concat(data)
						console.log('this.footPathList',this.footPathList);
						if(this.allSelected)this.selectAdd();
						this.page += 1;
						if (this.footPathList.length === parseInt(res.data.total)) {
							this.loadingType = 'noMore'
						} else {
							this.loadingType = 'more'
						}
					} else {
						this.$util.msg(res.message)
					}
					
				})
			},
			//全选中处理
			selectAdd(){
				this.footPathList.forEach( (element,index)=>{
						let firstContent = this.getFirst(element)
						firstContent.forEach( (fitem,findex)=>{
							// console.log('fitem',fitem);
							this.$set(fitem,'show',true)
						})
						
					})
			},
			removeOne(item, index) {
				const param = {
					product_id: item.id
				}
				removeCollection(param).then(res => {
					if (res.code === 0) {
						this.$util.msg('取消收藏成功')
						this.footPathList.splice(index, 1)
					} else {
						this.$util.msg(res.message)
					}
				})
			},
			batchRemove() {
				const params = {

				}
				removeList(params).then(res => {

				})
			},
			addCart(item) {
				console.log('item',item);
				var areaId = uni.getStorageSync('areaId')?uni.getStorageSync('areaId'):uni.getStorageSync('enterpriseInfo').areaId;
				var data = {
					goodsId: item.goodsId,
					// areaId: uni.getStorageSync('areaId'),
					areaId:areaId,
					num: 1
				}
				addOneToCart(data).then(res => {
					if (res.code === 0) {
						this.$util.msg('加入购物车成功')
					} else {
						this.$util.msg(res.message)
					}
				})
			},
			batchAddToCart() {
				const params = {

				}
				addListToCart(params).then(res => {

				})
			},
			goToDetail(item) {
				console.log('item',item);
				let id = item.goodsId;
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			},
		}
	}
</script>

<style lang="scss">
	page,
	.container {
		background: #f5f5f5;
		.mp-search-box {
		position: sticky;
		left: 0;
		top: 0;
		z-index: 9999;
		width: 100%;
		height: 100rpx;

		text-align: center;
		display: flex;
		flex-direction: column;
		background-color: rgba($color: #f5f5f5, $alpha: 0.8);
	/* 底部栏 */
.footer {
	color: #fff;
	line-height: 100rpx;
	flex: 0 0 100rpx;
	/* 不放大不缩小固定100rpx */
}
	.action-section {
		/* #ifdef H5 */
		margin-bottom: 100upx;
		/* #endif */
		position: fixed;
		left: 30upx;
		bottom: 30upx;
		z-index: 95;
		display: flex;
		align-items: center;
		width: 690upx;
		height: 100upx;
		padding: 0 30upx;
		background: rgba(255, 255, 255, .9);
		box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5);
		border-radius: 16upx;

		.checkbox {
			height: 52upx;
			position: relative;

			image {
				width: 52upx;
				height: 100%;
				position: relative;
				z-index: 5;
			}
		}

		.clear-btn {
			position: absolute;
			left: 26upx;
			top: 0;
			z-index: 4;
			width: 0;
			height: 52upx;
			line-height: 52upx;
			padding-left: 38upx;
			font-size: $font-base;
			color: #fff;
			background: $font-color-disabled;
			border-radius: 0 50px 50px 0;
			opacity: 0;
			transition: .2s;

			&.show {
				opacity: 1;
				width: 120upx;
			}
		}

		.total-box {
			flex: 1;
			display: flex;
			flex-direction: column;
			text-align: right;
			padding-right: 40upx;

			.price {
				font-size: $font-base + 4upx;
				color: $uni-color-primary;
			}

			.coupon {
				font-size: $font-sm;
				color: $font-color-light;

				text {
					color: $uni-color-primary;
				}
			}
		}

		.confirm-btn {
			padding: 0 38upx;
			margin: 0;
			border-radius: 100px;
			height: 76upx;
			line-height: 76upx;
			font-size: $font-base + 2upx;
			background: $uni-color-primary;
			box-shadow: 1px 2px 5px rgba(217, 60, 93, 0.72)
		}
	}

		.searchBox {
			display: flex;
			align-items: center;
			padding: 10rpx;
			// flex-direction: column;
			height: 40px;
			justify-content: space-between;
			// margin-top: 90rpx;
			background-color: white;

			.inputBox {
				display: flex;
				background: #fff;
				height: 68rpx;
				width: 98%;
				border-radius: 5px;

				&::before {
					content: " ";
					display: inline-block;
					width: 33rpx;
					height: 33rpx;
					position: relative;
					top: 18rpx;
					left: 305rpx;
					background: url(../../static/search-icon.png) no-repeat;
					background-size: contain;
				}
			}


		}

		.ser-input {
			width: 100%;
			height: 70rpx;
			line-height: 60rpx;
			text-align: center;
			font-size: 28upx;
			color: #909090;
			border-radius: 5px;
			// background: #f0f0f0;
			// background: #fff;
		}

		.search {
			width: 40rpx;
			height: 40rpx;
			margin-top: 10rpx;
		}

		.ph {
			text-align: center;
			font-size: 28upx;
			color: $font-color-base;
		}
	}
	}
	.footerBox{
		position: fixed;
		display: flex;
		bottom: 0px;
		width: 100%;
		height: 70rpx;
		background: rgba(255, 255, 255, .9);
		box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5);
		border-radius: 16upx;
		.footerContent{
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-radius: 16upx;
			.delete{
				width: 30%;
				background: red;
				height: 70rpx;
				display: flex;
  				align-items: center;
				border-bottom-right-radius: 16upx;
				text{
					line-height:70rpx;
					text-align: center;
					margin: 0 auto;
					color: white;
				}
			}
		}
	
	}
	.f-list {
		margin-top: 16rpx;
		display: flex;
		flex-direction: column;
		.f-time{
			padding-left: 16rpx;
		}
		.f-item {
			display: flex;
			padding: 16rpx 30rpx;
			flex-direction: row;
			border-radius: 20px;
			background-color: #fff;
			margin-bottom: 10px;
			.left {
				width: 200rpx;
				height: 200rpx;
				border-radius: 10rpx;
			}

			.right {
				flex: 1;
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.title {
					height: 40px;
					text-align: left;
					color: $font-color-dark;
					font-size: 15px;
					// margin-bottom: 8rpx;
				}

				.money-box {
					text-align: left;

					.integral {
						display: inline-block;
						color: $uni-color-primary;
						font-size: 15px;

						&:before {
							background: url(../../static/money.png) no-repeat;
							width: 22rpx;
							height: 22rpx;
							margin-right: 4rpx;
							display: inline-block;
							content: '';
							background-size: contain;
						}

						&:after {
							margin-left: 4rpx;
							content: '积分';
							color: #909090;
							font-size: 12px;
						}
					}

					.split {
						font-size: 15px;
						color: $base-color;
					}

					.price {
            display: inline-block;
            color: $uni-color-primary;
            font-size: 15px;
					}
				}

				.action {
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
					align-items: center;

					.delete {
						text-align: center;
						padding: 4rpx 16rpx;
						font-size: 13px;
						border-radius: 10px;
						background-color: #fff;
						color: $font-color-base;
						border: 0.5px solid #C0C4CC;
					}

					image {
						margin-left: 20rpx;
						width: 60rpx;
						height: 60rpx;
					}
				}
			}
		}
	}
</style>
